<template>
	<view class="quanlist">
		<view class="item" v-for="(item, i) in list" :key="i">
			<view class="tbox">
				<view class="lbox">
					<text>{{ item.title }}</text>
					<!-- <text>有效期至 2022-08-31</text> -->
					<text>{{ item.startTime }} 至 {{ item.endTime }}</text>
				</view>
				<view class="rbox">
					<text>{{ item.jian || item.money }}</text>
					<text v-if="item.man" style="text-align: right">满{{ item.man }}元可用 {{ setstr(item.tiaojian) }}</text>
					<text v-else style="text-align: right">无门槛 {{ setstr(item.tiaojian) }}</text>
				</view>
			</view>
			<view class="bbox">
				<view class="row">
					<view class="lbox" @click="update(item, i)">
						<text>使用规则</text>
						<text class="sjico" :class="{ sjicoXz: item.unfold }"></text>
					</view>
					<view class="rbox">
						<!-- 是否可以领取(0否 1 是) -->

						<block v-if="ling">
							<button v-if="item.if_ke_lingqu == 1" @click="lingqu(item, i)">领取</button>
							<button v-else :disabled="true">已领取</button>
						</block>
						<block v-else>
							<button v-if="item.status == 1" :disabled="true">已使用</button>
							<button v-else-if="item.status == 2" :disabled="true">已过期</button>
							<button @click="toTab(`home/home`)" v-else-if="item.status === 0" :disabled="false">去使用</button>
						</block>
					</view>
				</view>
				<view style="overflow: hidden">
					<u-transition mode="slide-down" duration="100" :show="item.unfold">
						<view class="row2">
							<text>{{ item.content }}</text>
						</view>
					</u-transition>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'quanlist',
	computed: {
		setstr() {
			return (data) => {
				if (data.length > 2) {
					return `\n ( ${data} )`;
				} else {
					return `( ${data} )`;
				}
			};
		}
	},
	props: {
		list: {
			type: Array | Number,
			default: () => {
				return [];
			}
		},
		ling: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {};
	},
	methods: {
		update(item, i) {
			this.$emit('updataUnfold', { a: !item.unfold, i });
		},
		lingqu(item) {
			this.$emit('citem', item);
		}
	}
};
</script>

<style lang="less" scoped>
.quanlist {
	.item + .item {
		margin-top: 16rpx;
	}
	.item {
		background: #ffffff;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		overflow: hidden;
		.bbox {
			position: relative;
			background: #ffffff;
			padding: 0 24rpx;
			padding-bottom: 28rpx;
			padding-top: 32rpx;
			&:before {
				content: '';
				.fix-c-x();
				top: 0;
				width: 300px;
				border-bottom: 1px dashed #e6e7ee;
			}
			.row {
				display: flex;
				justify-content: space-between;
				.lbox {
					display: flex;
					align-items: center;
					.j-active();
					text {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						margin-right: 16rpx;
					}
					.sjico {
						width: 20rpx;
						height: 16rpx;
						background: #000000;
						clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
						transition: 0.1s all;
					}
					.sjicoXz {
						transform: rotate(180deg);
					}
				}
				.rbox {
					button {
						min-width: 150rpx;
						height: 64rpx;
						background: #e54e4e;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #ffffff;
					}
				}
			}

			.row2 {
				overflow: hidden;
				background: #ffffff;
				white-space: pre-line;
				text {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
		}
		.tbox {
			position: relative;
			display: flex;
			padding: 28rpx 24rpx;

			min-height: 150rpx;

			&:before {
				content: '';
				position: absolute;
				z-index: 10;
				bottom: -14rpx;
				left: -12rpx;
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background: #f7f8fb;
			}
			&::after {
				content: '';
				position: absolute;
				z-index: 10;
				bottom: -14rpx;
				right: -12rpx;
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background: #f7f8fb;
			}
			.lbox {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				text:nth-of-type(1) {
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #000000;
				}
				text:nth-of-type(2) {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
			.rbox {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-end;

				text:nth-of-type(1) {
					font-size: 48rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #ff0000;
					&:before {
						content: '￥';
						font-size: 28rpx;
					}
				}
				text:nth-of-type(2) {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
			}
		}
	}
}
</style>
